<%--
  Created by IntelliJ IDEA.
  User: kingshion
  Date: 2020/5/20
  Time: 19:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <title>题目管理</title>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">试题管理</li>
        <li>创建试题</li>
        <li>导入试题</li>
    </ul>
    <div class="layui-tab-content">

        <%--   查看所有的题目     --%>
        <div class="layui-tab-item layui-show">
            <h3 style="color: #b2b2b2">题库用于对试题进行分类管理，请在以下列表中管理您的题库</h3>
            <br>
            <table class="layui-hide" id="questions" lay-filter="test"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>

        <%-- 新建题目  --%>
        <div class="layui-tab-item">
            <h3 style="color: #b2b2b2">填写下面的表单，创建一个新的题库</h3>

            <br>
            <h3 style="margin-left: 30px">题目管理</h3>
            <br>
            <hr>
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">题型</label>
                    <div class="layui-input-inline">
                        <select name="question_type" id="question_type" lay-filter="question_type"
                                lay-verify="required">
                            <option value="单选题">单选题</option>
                            <option value="多选题">多选题</option>
                            <option value="填空题">填空题</option>
                            <option value="判断题">判断题</option>
                            <option value="简答题">简答题</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">题库</label>
                    <div class="layui-input-inline layui-form" lay-filter="course_name">
                        <select id="course_name" lay-filter="coures" lay-verify="required"></select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">题干</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="content"></textarea>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">选项A</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="optionA"></textarea>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">选项B</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="optionB"></textarea>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">选项C</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="optionC"></textarea>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">选项D</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="optionD"></textarea>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">答案</label>
                </div>
                <div class="layui-form-item" style="width: 700px ;margin-left: 100px">
                    <textarea id="answer"></textarea>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="createQuestion">创建</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <%--  批量导入题目          --%>
        <div class="layui-tab-item">
            <h3 style="color: #b2b2b2">填写下面的表单，创建一个新的题库</h3>
            <br>
            <form action="" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">题库名称：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="course_name" lay-verify="required"
                               placeholder="题库名称" autocomplete="off" style="width:500px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">题库描述：</label>
                    <div class="layui-input-block">
                        <textarea name="course_desc" style="width:500px" class="layui-textarea"
                                  placeholder="题库描述"></textarea>
                    </div>
                </div>
            </form>
        </div>


    </div>
</div>


<script>
    layui.use(['layer', 'table', 'element', 'form', 'layedit'], function () {
        var layer = layui.layer,
            table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            layedit = layui.layedit,
            element = layui.element;

        // 渲染题目列表
        var tabelRender = table.render({
            elem: '#questions',
            url: '/OnlineExam/admin/question?m=show',
            cols: [[{
                type: 'checkbox',
                fixed: 'left',
                width: '3%'
            }, {
                field: 'question_id',
                title: '试题ID',
                fixed: 'center',
                sort: true,
                width: '7%',
            }, {
                field: 'course_name',
                fixed: 'center',
                title: '题库',
                width: '15%',
            }, {
                field: 'question_type',
                fixed: 'center',
                title: '题型',
                width: '5%'
            }, {
                field: 'question_content',
                fixed: 'center',
                title: '题干',
                width: '30%'
            }, {
                field: 'user_name',
                fixed: 'center',
                title: '创建者',
                width: '10%'
            }, {
                field: 'update_time',
                fixed: 'center',
                title: '最后修改',
                width: '15%'
            }, {
                fixed: 'center',
                title: '操作',
                toolbar: '#barDemo',
                width: '15%'
            }]],
            page: true
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var question_id = obj.data.question_id;
            var course_name = obj.data.course_name;
            var question_type = obj.data.question_type;
            var question_content = obj.data.question_content;
            var user_name = obj.data.user_name;

            // 删除题目
            if (obj.event === 'del') {
                layer.confirm('真的删除行么？', function (index) {
                    obj.del();
                    $.ajax({
                        url: "/OnlineExam/admin/question?m=del",
                        data: "id=" + question_id,
                        success: function (result) {
                            layer.msg('删除成功！');
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {  // 修改题目

                layer.open({
                    type: 2,
                    title: ['修改题目', 'font-size:18px;'],
                    content: './questionPages/modifyQuestion.jsp',
                    area: ['1000px', '800px'],
                    success: function (layero, index) {
                        // var body = layer.getChildFrame('body', index);
                        // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

                        var iframeWindow = window['layui-layer-iframe'+ index];//弹出层索引参数（index）

                        var content=iframeWindow.layui.layedit.getContent(index);//参数 index： 即执行layedit.build返回的值

                        console.log(body);
                        console.log(iframeWin);

                        // var qt =  body.find('#question_type').val();
                        // console.log(qt)
                        // body.find('input').val(course_name);
                        // body.find('textarea').val(course_desc);

                        body.find('#updateBtn').click(function (event) {
                            var id = question_id;
                            var name = body.find('input').val();
                            var desc = body.find('textarea').val();
                            $.ajax({
                                // url: "/OnlineExam/admin/course?m=update",
                                data: "id=" + id + "&name=" + name + "&desc=" + desc,
                                success: function (result) {
                                    layer.msg("修改成功！");
                                    layer.close(index);
                                    // history.go(0);
                                    // return true;
                                }
                            })
                        });
                    }
                });
            }
        });

        // 动态渲染题库的下拉框选项
        $.ajax({
            url: "/OnlineExam/admin/course?m=showCourseNames",
            success: function (result) {
                console.log(result);
                var names = $.parseJSON(result);
                var option = '';
                for (let i = 0; i < names.length; i++) {
                    console.log(names[i])
                    option += "<option value='" + names[i] + "'>" + names[i] + "</option>";

                    $("#course_name").html("");
                    $("#course_name").append(option);
                    form.render('select', 'course_name');
                }

            }
        });

        // 富文本编辑器的设置
        var content = layedit.build('content', {
            height: 100 //设置编辑器高度
        }); //建立编辑器

        var optionA = layedit.build('optionA', {
            height: 50 //设置编辑器高度
        }); //建立编辑器

        var optionB = layedit.build('optionB', {
            height: 50 //设置编辑器高度
        }); //建立编辑器

        var optionC = layedit.build('optionC', {
            height: 50 //设置编辑器高度
        }); //建立编辑器

        var optionD = layedit.build('optionD', {
            height: 50 //设置编辑器高度
        }); //建立编辑器

        var answer = layedit.build('answer', {
            height: 80 //设置编辑器高度
        }); //建立编辑器

        // 监听提交按钮
        form.on('submit(createQuestion)', function (data) {
            // 得到多选框的值
            var type = document.getElementById("question_type");
            var index = type.selectedIndex; // 选中索引
            var typeValue = type.options[index].value; // 选中值

            console.log(typeValue);

            var course = document.getElementById("course_name");
            var c_index = course.selectedIndex;
            var courseValue = course.options[c_index].value;
            console.log(courseValue);

            var contentText = layedit.getText(content);//取纯文本值
            var optionAText = layedit.getText(optionA);
            var optionBText = layedit.getText(optionB);
            var optionCText = layedit.getText(optionC);
            var optionDText = layedit.getText(optionD);
            var answerText = layedit.getText(answer);

            console.log(contentText + "-->" + optionAText);

            // console.log(type+'--'+course+'--'+content+'--'+optionA+'--'+optionB+'--'+optionC+'---'+optionD+'--'+answer);

            $.ajax({
                url: "/OnlineExam/admin/question?m=add",
                method: "post",
                data: "course=" + courseValue + "&type=" + typeValue + "&user_id=" + 100005 + "&content=" + contentText + "&optionA=" + optionAText + "&optionB=" + optionBText + "&optionC=" + optionCText + "&optionD=" + optionDText + "&answer=" + answerText,
                success: function (result) {
                    layer.msg("添加成功");
                }
            }, function () {
                location.reload(true);
                tabelRender();
            });
            return true;
        })
    })
</script>

</body>
</html>
